<template>
  <div id="layout-top-basic">
    <header>
      <div class="header-box">
        <div class="logo-box">
          Ambition
        </div>
        <div class="hello-word-box" />
        <div class="menu-box">
          <div class="menu">
            <ul class="nav">
              <li>
                <a href="/"><span active-class="active">首页</span></a>
              </li>
              <li>
                <a href="/about"><span active-class="active">关于</span></a>
              </li>
              <li>
                <a href="/link/link"><span active-class="active">友链</span></a>
              </li>
              <!-- <li>
                <a href="/message/message"><span active-class="active">留言板</span></a>
              </li>
              <li> <a href="/talk/talk"><span active-class="active">说说</span></a></li> -->
            </ul>
            <a
              href="https://ambitions-king.gitee.io/blognation"
              target="_blank"
              class="btn"
            >
              gitee
            </a>
            <nuxt-link v-if="!userInfo" to="/login/login" class="btn">
              Sign In
            </nuxt-link>
            <div v-else class="user-avatar">
              <a-dropdown>
                <div class="user-info-box">
                  <img :src="userInfo.avatar" alt="">
                  <span>{{ userInfo.userName }}</span>
                </div>
                <a-menu
                  slot="overlay"
                  class="dropDowmMenu"
                  overlay-style="height:100px"
                  placement="bottomCenter"
                  @click="onClick"
                >
                  <a-menu-item key="selfinfo">
                    <span>个人资料</span>
                  </a-menu-item>
                  <a-menu-item key="resetpwd">
                    <span>修改密码</span>
                  </a-menu-item>
                  <a-menu-item
                    v-if="userInfo.roles == 'role_admin'"
                    key="admin-system"
                  >
                    <span> 管理中心</span>
                  </a-menu-item>
                  <a-menu-item key="logout">
                    <span> 退出登录</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </div>
      </div>
    </header>
    <nuxt />
    <div class="footer">
      <div class="go-to-top">
        <a-back-top>
          <div class="ant-back-top-inner">
            <svg
              t="1574745035067"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5404"
              class="icon"
              data-v-c6073ba8=""
            >
              <path
                d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z"
                p-id="5405"
                data-v-c6073ba8=""
              />
              <path
                d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z"
                p-id="5406"
                data-v-c6073ba8=""
              />
            </svg>
          </div>
        </a-back-top>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { checkToken, doLogout, updateViewCount } from '../api/api'
export default {
  data () {
    return {
      isShow: false,
      userInfo: null
    }
  },
  mounted () {
    this.checkUser()
    this.updateWebViewCount()
  },
  methods: {
    updateWebViewCount () {
      updateViewCount()
    },
    // fetch ({ store, params }) {
    //   return axios.get('http://my-api/stars').then((res) => {
    //     store.commit('setStars', res.data)
    //   })
    // },
    checkUser () {
      checkToken().then((res) => {
        if (res.code === 200) {
          this.userInfo = res.data
          this.$store.commit('index/SAVE_USERINFO', res.data)
        } else {
          this.userInfo = null
        }
      })
    },

    onClick ({ key }) {
      if (key === 'selfinfo') {
        location.href = '/userinfo'
      } else if (key === 'resetpwd') {
        this.$message.success('修改密码')
      } else if (key === 'admin-system') {
        location.href = 'http://mp.zibbo.xyz/'
      } else if (key === 'logout') {
        doLogout().then((result) => {
          if (result.code === 200) {
            this.userInfo = null
          } else {
            this.$message.error(result.message)
          }
        })
      }
    },
    ...mapMutations({
      SAVE_USERINFO: 'index/SAVE_USERINFO'
    })
  }
}
</script>
<style lang="less" scope>
.header-box {
  width: 1249px;
  margin: 0px auto;
  height: 50px;
  background: var(--bg-color);
  border-radius: 5px;
  // logo
  .logo-box {
    margin-left: 20px;
    float: left;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3ex;
    font-weight: 600;
    color: var(--text-color);
    border-radius: 5px;
    line-height: 50px;
  }
  .menu-box {
    float: right;
    width: 600px;
    height: 50px;
    .menu {
      color: var(--text-color);
      .nav {
        float: left;
        overflow: hidden;
        li {
          line-height: 50px;
          list-style: none;
          float: left;
          a {
            display: block;
            padding: 0 20px;
            color: var(--text-color);
            position: relative;
            &.active:before,
            &:hover:before {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              width: 100%;
              height: 2px;
              background-color: #e0e5df;
            }
          }
        }
      }
      .btn {
        float: left;
        border: 2px solid #e0e5df;
        border-radius: 28px;
        height: 28px;
        line-height: 28px;
        color: var(--text-color);
        padding: 0 16px;
        margin-left: 10px;
        margin-top: 10px;
        cursor: pointer;
        box-sizing: content-box;
      }
      .user-avatar {
        height: 50px;

        float: left;
        margin-left: 20px;
        // padding: 12.5px 0;
        cursor: pointer;
        position: relative;
        &:hover {
          /deep/.user-control {
            display: block;
          }
        }
        .user-info-box {
          height: 50px;
          > img {
            margin-top: 5px;
            line-height: 50px;
            float: left;
            border-radius: 50%;
            width: 39px;
            height: 39px;
            display: block;
          }
          > span {
            margin-left: 10px;
            line-height: 50px;
            float: left;
            line-height: 50px;
            max-width: 80px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
      }
    }
  }
}
.hello-word-box {
  float: left;
  margin-right: 20px;
}
.footer {
  clear: both;
  position: relative;
  width: 100%;
  .go-to-top .ant-back-top-inner {
    // cursor: pointer;
    position: fixed;
    right: 15px;
    bottom: 100px;
    width: 30px;
    line-height: 30px;
    height: 30px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.35);
    svg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 20px;
      height: 20px;
      // margin: 5px;
      fill: #2c3e50;
      // color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
